<template>
	<div class="tasks">
		<span :class="containerClass">{{item.name}}</span>
		<div v-if="showWaitButton()" style="padding-top: 8px;" class="button" @click="updateDoneStatus($event)">
			<a href="#" class="gg-check" style="display: inline-block;vertical-align: text-bottom;"></a>
		</div>
		<div v-if="showDoneButton()" style="padding-top: 8px;" class="button" @click="deleteItem($event)">
			<a href="#" class="gg-close" style="display: inline-block;vertical-align: text-bottom;"></a>
		</div>
	</div>
</template>

<script>
import { getData, updateData } from "@store/data";
import { envoke } from "@store";
import { ITEM_STATUS } from "@project/todo/model/constant";
const { DONE, WAIT } = ITEM_STATUS;
export default {
	name: "item",
	props:{
		uuid: {
			type: String,
			default: '',
		},
		pid: {
			type: String,
			default: '',
		}
	},
	data () {
		console.log(getData(this.uuid));
		return {
			item: getData(this.uuid)
		}
	},
	computed: {
		containerStyle() {
			return {
				position: 'relative'
			};
		},
		containerClass(){
			if(!this.item){
				return ''
			}
			const cls = this.item.status === WAIT ? "" : "completed"; 
			return cls;
		}
	},
	methods:{
		showWaitButton(){
			if(!this.item){
				return true;
			}
			return this.item.status === WAIT;
		},
		showDoneButton(){
			if(!this.item){
				return false;
			}
			return this.item.status === DONE;
		},
		updateDoneStatus(e){
			const newItem = {...this.item};
			newItem.status = DONE;
			updateData(this.uuid, newItem);
			this.item.status = DONE;
		},
		deleteItem(e){
			envoke(this.pid, 'removeList', this.item)
		}
	},
	mounted(){
		console.log("todo List mounted");
	},
	beforeDestroy(){
		console.log("todo List before destroy");
	}
}
</script>

<style lang="less">
@import "@static/components/icons/check.less";
@import "@static/components/icons/close.less";
</style>